<template>
  <div
    class="common-layout"
    @mouseover="set_resize(false)"
    @mouseleave="set_resize(true)"
  >
    <el-container>
      <el-header
        data-tauri-drag-region
        direction="horizontal"
        style="width: 100%"
        class="custom-header"
      >
        <el-menu
          data-tauri-drag-region
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
        >
          <el-menu-item index="1"
            >&nbsp;<el-icon><Expand /></el-icon
          ></el-menu-item>
          <!-- 取消收藏夹
          <el-menu-item index="2"
            >&nbsp;<el-icon><Star /></el-icon
          ></el-menu-item>
          -->
          <el-menu-item index="3"
            >&nbsp;<el-icon><Check /></el-icon
          ></el-menu-item>
        </el-menu>

        <div class="header-buttons">
          <el-button
            type="info"
            @click="set_small()"
            :icon="Minus"
            circle
            size="small"
            class="header-button noselect-button"
          />
          <el-button
            type="info"
            @click="set_top()"
            :icon="Paperclip"
            circle
            size="small"
            class="header-button"
            :class="{ 'selected-button': top_flag ,'noselect-button': !top_flag}"
          />
          <el-button
            type="info"
            @click="set_close()"
            :icon="Close"
            circle
            size="small"
            class="header-button"
          />
        </div>
      </el-header>
      <el-main>
        <div id="main">
          <ul id="content">
            <Item
              v-for="(item, index) in list"
              :key="item.id"
              v-model="item.title"
              @delete="deleteItem(item.id)"
              @star="change_star(index)"
              @finish="change_finish(index)"
              @update:title="title_change(index, $event)"
              @editing="set_is_editing(true)"
              :is_star="item.is_star"
            >
            </Item>
          </ul>
        </div>
        <el-button
          type="info"
          @click="addItem()"
          :icon="Plus"
          circle
          size="large"
          class="bottom-right-button"
        />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {
  Plus,
  Check,
  Star,
  Expand,
  Close,
  Minus,
  Paperclip,
} from "@element-plus/icons-vue";
import Item from "./components/item.vue";
import { reactive, ref, onBeforeMount } from "vue";
import { invoke } from "@tauri-apps/api/tauri";
import { IDGenerator } from "./IDGenerator";
import { WebviewWindow } from "@tauri-apps/api/window";
const mainWindow = WebviewWindow.getByLabel("main");
const resize_flag = ref(false);
//编辑中不可缩放窗口
const is_editing = ref(false);
//手动点击缩小按钮后，会在完成函数之后再次自动触发一次窗口移动事件，因此需要将本次缩放标识为按钮触发并忽略此次事件触发
const ignore_move_flag = ref(false);
const top_flag = ref(false);

const list = reactive([
  {
    id: 1,
    title: "Item 1",
    is_star: false,
    is_finish: false,
    create_time: "",
    finish_time: "",
  },
  {
    id: 2,
    title: "Item 2",
    is_star: false,
    is_finish: false,
    create_time: "",
    finish_time: "",
  },
]);
const iDGenerator = new IDGenerator();
const activeIndex = ref("1");
onBeforeMount(() => {
  if (mainWindow !== null) {
    mainWindow.onMoved(({ payload: position }) => {
      if (ignore_move_flag.value) {
        ignore_move_flag.value = false;
      } else {
        resize_flag.value = false;
      }
    });
  }
  console.log(mainWindow);
  updateItem(10);
});
function deleteItem(id: number) {
  invoke("rm_item", { i: id });
  updateItem(parseInt(activeIndex.value) * 10);
}
function change_star(index: number) {
  console.log("监听到star事件");
  list[index].is_star = !list[index].is_star;
  invoke("updata_item", { item: list[index] });
  updateItem(parseInt(activeIndex.value) * 10);
}
function change_finish(index: number) {
  list[index].is_finish = !list[index].is_finish;
  let current = new Date();
  list[index].finish_time = current.toLocaleString();
  invoke("updata_item", { item: list[index] });
  updateItem(parseInt(activeIndex.value) * 10);
}
//内容更改
function title_change(index: number, newValue: string) {
  //内容更改完成，修改编辑中为false
  set_is_editing(false);
  list[index].title = newValue;
  invoke("updata_item", { item: list[index] });
  updateItem(parseInt(activeIndex.value) * 10);
}
//更新绑定队列
// i: 10当前全部  20已收藏  30已完成
function updateItem(item_type: number) {
  invoke("list_item", { i: item_type }).then((res) => {
    list.splice(0, list.length, ...(res as any[]));
    console.log(list);
    
  });
}
function addItem() {
  let id: number = iDGenerator.generate();
  console.log(id, "new id");
  invoke("add_item", { id: parseInt(id.toString()) });
  updateItem(parseInt(activeIndex.value) * 10);
}

function set_top() {
  mainWindow?.setAlwaysOnTop(!top_flag.value);
  top_flag.value = !top_flag.value;
}

function set_small() {
  to_small();
  resize_flag.value = true;
  //手动点击缩小按钮后，会在完成函数之后再次自动触发一次窗口移动事件，因此需要将本次缩放标识为按钮触发并忽略此次事件触发
  ignore_move_flag.value = true;
}

function set_resize(flag: boolean) {
  console.log("监听到resize flag:", flag, "  resize_flag:", resize_flag.value);
  //可缩放开启、没有正在编辑同时满足，才可进行窗口缩放
  if (resize_flag.value&&(!is_editing.value)) {
    if (flag) {
      to_small();
    } else {
      to_revert();
    }
  }
}

function to_small() {
  mainWindow?.outerPosition().then((ps) => {
    ps.y = 0;
    mainWindow?.setPosition(ps);
  });
  mainWindow?.outerSize().then((size) => {
//    size.width = 380;
    size.height = 10;
    mainWindow?.setSize(size);
  });
}
function to_revert() {
  mainWindow?.outerSize().then((size) => {
    size.height = 600;
    mainWindow?.setSize(size);
  });
}

function set_close() {
  mainWindow?.close();
}
//列表切换
const handleSelect = (key: number, keyPath: string[]) => {
  activeIndex.value = key.toString();
  if (activeIndex.value === "1") {
    updateItem(10);
  }
  if (activeIndex.value === "2") {
    updateItem(20);
  }
  if (activeIndex.value === "3") {
    updateItem(30);
  }
};
function set_is_editing(flag:boolean){
  console.log("编辑：",flag);
  
  is_editing.value = flag;
}
</script>

<style scoped>
.common-layout{
  height: 100%;
}
#main {
  border: 0px;
  padding: 0px;
}

#content {
  border: 0px;
  padding: 0px;
}

.el-header {
  --el-header-padding: 0 0px;
  --el-header-height: 60px;
  padding: var(--el-header-padding);
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
}

.el-main {
  padding: 10px;
  padding-top: 5px;
}

.bottom-right-button {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 10px; /* 可以调整按钮的右边距 */
  margin-bottom: 10px; /* 可以调整按钮的下边距 */
}
.icon {
  height: 100%;
}
.custom-header {
  position: relative;
}

.header-buttons {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.header-button {
  margin-left: 5px;
  background-color: transparent;
  border-color: transparent;
  color: #c0c4cc;
}

.header-button:hover {
  color: #fff;
}

.selected-button {
  background-color: #b1b3b8;
  color: #ffffff;
}
.noselect-button:focus {
  background: transparent;
  border-color: transparent;
  color: #c0c4cc;
}
</style>
